<template>
	<view class="userview">
		<view class="topBar">
			<hx-navbar :background-color="navbarConfig.background" :fixed="true" :back="false" transparent="show" :color="navbarConfig.color"
			 title="我的"></hx-navbar>
		</view>

		<!-- 个人信息 -->
		<view class="info-box" >
			<view class="bg-box" :style="'background-color:' + colorConfig.base"></view>
			<view class="sub-box" v-if="userInfo">
				<image :src="userInfo.imageUrl ? userInfo.imageUrl : '/static/logo.png'" mode="aspectFill"></image>
				{{userInfo.name}}
			</view>
			
			 <view class="nologinView" v-if="!userInfo">
				 <u-button @tap="navTo('/pages/login/login')" :custom-style="customStyle">您未登录，请点击登录</u-button>
			 </view>
		</view>

		<uni-list class="list-box">
			<!-- <uni-list-item class="list-item" title="物流信息" :show-arrow="true" thumb="/static/icon01.png" @tap="navTo('/pages/order/trace')"></uni-list-item> -->
			<uni-list-item class="list-item" title="抢单记录" :show-arrow="true" thumb="/static/icon02.png" @tap="navTo('/pages/order/list')"></uni-list-item>
			<uni-list-item class="list-item" title="上传收款码" :show-arrow="true" thumb="/static/icon03.png" @tap="navTo('/pages/pay/qrcode')"></uni-list-item>
			<uni-list-item class="list-item" title="投诉建议" :show-arrow="true" thumb="/static/icon04.png" @tap="navTo('/pages/contact/contact')"></uni-list-item>
			<uni-list-item class="list-item" title="信息补充" :show-arrow="true" thumb="/static/icon05.png" @tap="navTo('/pages/car/driver')"></uni-list-item>
			<uni-list-item class="list-item" title="检查更新" :show-arrow="true" thumb="/static/icon06.png" @tap="navTo('/pages/index/index')"></uni-list-item>
			<uni-list-item class="list-item" title="修改密码" :show-arrow="true" thumb="/static/icon07.png" @tap="navTo('/pages/login/password')"></uni-list-item>
			<uni-list-item class="list-item" title="个人信息" :show-arrow="true" thumb="/static/icon08.png" @tap="navTo('/pages/user/info')"></uni-list-item>
			<uni-list-item class="list-item" title="退出登录" :show-arrow="true" thumb="/static/icon09.png" @tap="navTo('/pages/login/login')"></uni-list-item>
		</uni-list>
	</view>
</template>

<script>
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			uniList,
			uniListItem
		},
		data() {
			return {
				customStyle: {
						margin:'40upx 0 0 0',
						background: '#4f6bad',
						color: '#ffffff'
					}
			}
		},
		onLoad() {
			console.log(this.userInfo)
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			loadData() {
				this.$forceUpdate()
			},
			navTo(url) {
				if (!this.userInfo) {
					url = '/pages/login/login'
				}
				if (url == '/pages/login/login') {
					this.$store.commit('logout')
					this.$api.logout()
				}
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="less">
	.info-box {
		position: relative;
		padding: 30upx;

		.sub-box {
			position: relative;
			z-index: 10;
			padding: 30upx;
			font-size: 36upx;
			font-weight: bold;
			text-align: center;
			border-radius: 20upx;
			background-color: #fff;
		}

		image {
			display: block;
			margin: 0 auto 20upx;
			width: 120upx;
			height: 120upx;
			border-radius: 120upx;
		}

		.bg-box {
			position: absolute;
			left: 0;
			right: 0;
			top: -2upx;
			height: 130upx;
			border-radius: 0 0 60upx 60upx;
		}
	}
	
	.nologinView{
		padding: 20upx;
	}

	.list-box {
		margin: 20upx 40upx 60upx;
		border-radius: 20upx;
		background-color: #fff;

		.list-item {
			font-size: 28upx;
			line-height: 72upx;
		}
	}
</style>
